<template>
	<view class="indexs">
		<view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('page_userinfo.title') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'">
			<view class="cangkuyuan_saomaruku_center">
				<view class="cangkuyuan_saomaruku_item2">
					<view v-if="setting.usercode_mode.is_show!=1" class="cangkuyuan_saomaruku_item1_cont">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{ $t('page_userinfo.User_id') }}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r3">
							<input disabled="" type="text"   :value="userinfo.user_id" />
						</view>
					</view>
					<view v-if="setting.usercode_mode.is_show!=0" class="cangkuyuan_saomaruku_item1_cont">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{ $t('page_userinfo.User_code') }}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r3">
							<input disabled="" type="text"   :value="userinfo.user_code" />
						</view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{ $t('page_userinfo.Contact_person') }}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r3">
							<input type="nickname" @input="nickNameFun" :placeholder="$t('page_userinfo.nicknameplaceholder')" :value="userinfo.nickName" />
						</view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont">
					    <view class="cangkuyuan_saomaruku_item1_cont_l"><text>{{ $t('page_userinfo.gander') }}</text></view>
					    <view class="cangkuyuan_saomaruku_item2_r3">
					        <picker @change="bindPickerChange" :value="cindex" :range="cangkuarray">
					            <view class="baoguo_item2_cont_r">
					                <text>{{ cangkuarray[cindex] }}</text>
					                <image :src="imgUrl+'/dzx_img25.png'"></image>
					            </view>
					        </picker>
					    </view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{ $t('page_userinfo.avatarUrl') }}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r3">
							<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
							<image  class="avatarUrl" :src="avatarUrl ? avatarUrl : imgUrl + '/dzx_img94.png'" mode="aspectFill"></image>
						</view>
					</view>
					
					<view class="cangkuyuan_saomaruku_item1_cont">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{ $t('page_userinfo.Contact_number') }}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r3">
							<input type="text" @input="phoneFun" :placeholder="$t('page_userinfo.phoneplaceholder')" :value="userinfo.mobile" />
						</view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{ $t('page_userinfo.email') }}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r3">
							<input type="text" @input="emailFun" :placeholder="$t('page_userinfo.placeholder4')" :value="userinfo.email" />
						</view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{ $t('page_userinfo.wechat') }}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r3">
							<input type="text" @input="wechatFun" :placeholder="$t('page_userinfo.wechatplaceholder')" :value="userinfo.wechat" />
						</view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont">
					    <view class="cangkuyuan_saomaruku_item1_cont_l"><text>{{ $t('page_userinfo.birthday') }}</text></view>
					    <view class="cangkuyuan_saomaruku_item2_r3">
					        <picker fields="day" mode = date :value="birthday"  @change="bindDateChange">
					            <view class="birthday">{{ birthday }}</view>
					        </picker>
					    </view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont" v-if="userclient.userinfo.is_identification_card==1">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{userclient.userinfo.identification_card}}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r3">
							<input type="text" @input="identificationFun" :placeholder="$t('page_userinfo.identification_cardplaceholder')" :value="userinfo.identification_card" />
						</view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont2" style="border-bottom: none" v-if="userclient.userinfo.is_identification_card==1">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<text>{{userclient.userinfo.identification_card_image}}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r5" @click="toSelectImage()">
							<view class="cangkuyuan_saomaruku_item2_r5_img"><image :src="imageSrc"></image></view>
							<view class="cangkuyuan_saomaruku_item2_r5_img"><image :src="imgUrl + '/dzx_img193.png'"></image></view>
						</view>
					</view>
					<view class="my_querendb_item3" @tap="gouxuan">
						<image :src="imgUrl + (isshows ? 'dzx_img131' : 'dzx_img132') + '.png'"></image>
						<view class="my_querendb_item3_t1">
							{{ $t('page_my_querendb.viewed_and_agreed') }}
							<text @tap="guizeshows">《{{ guizes.article_title }}》</text>
						</view>
					</view>
				</view>
				
				<view class="baoguo_btns">
					<view class="baoguo_btns_posi">
						<view class="baoguo_btn" @tap="saveShop">{{ $t('page_my_shop.save') }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="baoguo_guize" v-if="guizeshow">
			<view class="baoguo_guize_banner">
				<view class="baoguo_guize_title">《{{ guizes.article_title }}》</view>
				<rich-text :nodes="article_content"></rich-text>
				<view class="baoguo_guize_btns" @tap="isguizeshows">
					<view class="baoguo_guize_btns_txt">{{ $t('page_my_querendb.isee') }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');

export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			setting: uni.getStorageSync('setting'),
			userclient:uni.getStorageSync('userclient'),
			imageSrc: '',
			imageIds: '',
			words: '',
			detail: '',
			shop_name: '',
			nickName: '',
			mobile: '',
			email: '',
			wechat: '',
			address: '',
			summary: '',
			longitude: '',
			latitude: '',
			userinfo:'',
			avatarUrl: '',
			cangkuarray: [
				'保密',
				'男',
				'女'
			],
			cindex:0,
			birthday: '1990-06-14',
			identification_card:'',
			guizes: {
				article_title: ''
			},
			article_content:'',
			guizeshow: false,
			isshows: false,
			identification_card:'',
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ 
	onLoad(options) {
		var that = this;
		that.getShopDetail();
		that.guize();
		that.getsetting();
	},
	onShow() {
		var that = this;
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		//功能开关
		getsetting() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/page/service&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					that.setting = res.data.data.values
					that.menu_type = res.data.data.values.menu_type
					that.officialaccount = res.data.data.userclient==null?res.data.data.userclient:res.data.data.userclient.officialaccount
					that.copyright = res.data.data.copyright
					that.is_passwordlogin = res.data.data.userclient.loginsetting.is_passwordlogin
					uni.setStorageSync('service_phone', res.data.data.values.service_phone);
					uni.setStorageSync('menu_type', res.data.data.values.menu_type);
					uni.setStorageSync('userclient', res.data.data.userclient);
					console.log(that.setting,9876);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		guize() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/article/report_note&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					var article_content = res.data.data.detail.article_content;
					article_content = article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
					that.guizes= res.data.data.detail
					that.article_content= article_content
				}
			});
		},
		gouxuan() {
			this.isshows= !this.isshows
		},
		bindDateChange: function(e) {
			this.birthday = e.detail.value;
		},
		isguizeshows() {
			this.guizeshow= false
		},
		
		guizeshows() {
			this.guizeshow= true
		},
		identificationFun(e) {
			var that = this;
			that.identification_card= e.detail.value
		},
		nickNameFun(e) {
			var that = this;
			that.nickName= e.detail.value
		},
		phoneFun(e) {
			var that = this;
			that.mobile= e.detail.value
		},
		emailFun(e) {
			var that = this;
			that.email= e.detail.value
		},
		wechatFun(e) {
			var that = this;
			that.wechat= e.detail.value
		},
		//选择状态
		bindPickerChange: function (e) {
		    this.cindex= e.detail.value
		},
		onChooseAvatar(e) {
			var that = this;
			const { avatarUrl } = e.detail;
			wx.uploadFile({
				filePath: avatarUrl,
				name: 'iFile',
				url: app.globalData['url'] + `index.php?s=/api/upload/avatarUrlimage&wxapp_id=` + uni.getStorageSync('web_id') + '&token=' + uni.getStorageSync('token'), //服务器端接收图片的路径
				success: function(res) {
					console.log(res, 7777); //发送成功回调
					let uploadFileResJson = JSON.parse(res.data.replace('\uFEFF', ''));
					that.avatarUrl = uploadFileResJson.data.file_path;
				},
				fail: function(res) {
					console.log(res); //发送失败回调，可以在这里了解失败原因
				}
			});
		},
		//获取用户信息
		getShopDetail() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.get(`index.php?s=/api/user/detail&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					this.userinfo = res.data.data.userInfo;
					this.avatarUrl = res.data.data.userInfo.avatarUrl;
					this.cindex = res.data.data.userInfo.gender.value;
					this.birthday = res.data.data.userInfo.birthday;
					this.imageSrc = res.data.data.userInfo.userimage!=null?res.data.data.userInfo.userimage.file_path:'';
					this.mobile = res.data.data.userInfo.mobile;
					this.wechat = res.data.data.userInfo.wechat;
					this.email = res.data.data.userInfo.email;
					this.identification_card = res.data.data.userInfo.identification_card;
				}
			});
		},
		jumpzuo() {
			uni.navigateBack();
		},

		toSelectImage() {
			var that = this;
			uni.chooseImage({
				count: 1, // 最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: function(res) {
					//判断图片格式
					uni.showLoading({
						title:'上传中...'
					})
					console.log(res)
					for(var i=0;i<res.tempFiles.length;i++){
						if(res.tempFiles[0]['size']>2*1024*1024){
							uni.showToast({
								title: '图片大小不能超过2M',
								icon: 'none',
								duration: 3000
							});
							return;
						}
						that.uploadImgFile(res.tempFilePaths[0],that)
					}
				}
			});
		},
		uploadImgFile(filePath) {
			var that = this;
			uni.uploadFile({
				url: app.globalData['url'] + '/index.php?s=/api/upload/image&wxapp_id=' + uni.getStorageSync('web_id') + '&token=' + uni.getStorageSync('token'),
				filePath: filePath,
				name: 'iFile',
				success: response => {
					let res = JSON.parse(response.data);
					uni.hideLoading();
					if (res.code == 1) {
						that.imageIds= res.data.file_id
						that.imageSrc= res.data.file_path
					}
				},
				fail: err => {
					uni.hideLoading();
					console.log('请求失败_______________', err);
				}
			});
		},
		//确认入库按钮
		saveShop() {
			var that = this;
			console.log(that.userclient.userinfo, 999);
			if(!that.isshows){
				uni.showToast({
					title:"请先阅读隐私协议",
					icon: 'none'
				})
				return;
			}
			
			var data = {
				user_image_id: that.imageIds,
				nickName: that.nickName == '' ? that.userinfo.nickName : that.nickName,
				mobile: that.mobile,
				gender:that.cindex == '' ? that.userinfo.gender.value : that.cindex,
				email:that.email,
				wechat:that.wechat,
				birthday:that.birthday == '' ? that.userinfo.birthday : that.birthday,
				identification_card:that.identification_card,
				token: uni.getStorageSync('token')
			};
			// console.log(data,9976);
			// return;
			if(that.userclient.userinfo.is_identification_card_force==1 && data.identification_card ==''){
				uni.showToast({
					title:"请先录入" + that.userclient.userinfo.identification_card,
					icon: 'none'
				})
				return;
			}
			if(that.userclient.userinfo.is_identification_card_force==1 && data.imageSrc ==''){
				uni.showToast({
					title:"请先录入" + that.userclient.userinfo.identification_card_image,
					icon: 'none'
				})
				return;
			}
			if(that.userclient.userinfo.is_mobile_force==1 && data.mobile ==''){
				uni.showToast({
					title:"请先录入手机号",
					icon: 'none'
				})
				return;
			}
			if(that.userclient.userinfo.is_email_force==1 && data.email ==''){
				uni.showToast({
					title:"请先录入邮箱",
					icon: 'none'
				})
				return;
			}
			console.log(that.userclient.userinfo.is_wechat_force,9876);
			if(that.userclient.userinfo.is_wechat_force==1 && data.wechat ==''){
				uni.showToast({
					title:"请先录入微信号",
					icon: 'none'
				})
				return;
			}
			if(that.userclient.userinfo.is_birthday_force==1 && data.birthday ==''){
				uni.showToast({
					title:"请先录入生日",
					icon: 'none'
				})
				return;
			}
			request.post(`index.php?s=/api/user/updateuser&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: res.data.data
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 0
						});
					}, 1000);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>
<style>
@import './my_userinfo.css';
</style>
